<template>
	<div style="padding: 20rpx">
		<div class="box">
			<uni-forms ref="form" :modelValue="baseFormData" labelWidth="100px">
				<uni-forms-item label="反馈状态:" name="fkzt">
					<uni-data-select v-model="baseFormData.fkzt" :localdata="fkztDics"
						@change="changeFkztDict"></uni-data-select>
				</uni-forms-item>
			</uni-forms>
		</div>
		<div class="box">
			<el-col :span="24">
				<div
					style="height: 55px;line-height: 30px;display: flex;justify-content: space-between;margin-bottom: 20rpx;">
					<span>下达：{{ viewData.xdsl }}</span>
					<span>未反馈：{{ viewData.wfk }}</span>
					<span style="color: #bd3225">未读：{{ viewData.wdsl }}</span>
					<span style="color: #1087fa">已读：{{ viewData.ydsl }}</span>
					<span style="color: #577823">已反馈：{{ viewData.yfk }}</span>
				</div>
			</el-col>
		</div>
		<div class="box">
			<el-table @cell-click="getChildOptions" v-loading="isLoading" :header-cell-style="{ background:'#409EFFF',color:'#000000',padding:'0 0'}"
				:data="viewTxlTableData" border style="width: 100%">
				<el-table-column prop="deptName" label="名称">
				</el-table-column>
				<el-table-column prop="sprName" label="审批人">
				</el-table-column>
				<el-table-column prop="spyj" label="意见">
				</el-table-column>
				<el-table-column prop="spsj" label="审批时间">
<!--					<template slot-scope="scope">-->
<!--						<div>{{getCysj(scope.row.cysj)}}</div>-->
<!--					</template>-->
				</el-table-column>
				<el-table-column prop="fkzt" label="反馈进度">
					<template slot-scope="scope">
						<el-tag v-if="'1' === scope.row.fkzt" type="danger">未读</el-tag>
						<el-tag v-if="'2' === scope.row.fkzt">已读</el-tag>
						<el-tag v-if="'3' === scope.row.fkzt" type="success"
							@click="toCkFile(scope.row.id)">已反馈></el-tag>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:small="true"
				:hide-on-single-page="true"
				:total="viewTxlPageParams.total"
				:current-page.sync="viewTxlPageParams.page"
				@current-change="getList">
			</el-pagination>
		</div>
		<view style="height: 100rpx;margin-top: 50rpx;"></view>
	</div>

</template>

<script>
	import { getZjxdUserByRwId,getChildOptions } from "@/api/system/xdwj";
	import { getAppZjxdRwbInfo } from "@/api/system/yjgl";
	import { getUsername} from "@/utils/auth";
	import {
		getDicts
	} from "@/api/system/dict/data";
	import config from '@/config';
	export default {
		name: "ckList",
		data() {
			return {
				isLoading: false,
				baseFormData: {
					fkzt: ""
				},
				viewTxlTableData: [],
				fkztDics: [],
				viewData: {},
				sid: "",
				username: "",
				viewTxlPageParams: {
					total: 0,
					page: 1,
					limit: 10
				}
			}
		},
		onLoad(options) {
			this.sid = options.sid;
			this.username = getUsername();
		},
		computed: {
			getCysj() {
				return cysj => {
					if (!cysj) return "";
					let cysjString = "";

					if (cysj < 60) {
						cysjString = cysj + "秒";
					} else {
						let m = Math.floor(cysj / 60); // 转换为分钟
						let s = cysj % 60; // 余下的秒数
						cysjString = m + "分钟" + s + "秒";
					}
					return cysjString;
				}
			}
		},
		methods: {
      getChildOptions(row, column, cell, event){
        if (column.label != "反馈进度"){
          this.$tab.navigateTo("/pages/home/step/ckChildList?sid=" + row.id);
        }
      },
			changeFkztDict(e) {
				this.baseFormData.fkzt = e
				this.getList();
			},
			getList() {
				this.isLoading = true
        getZjxdUserByRwId({
          sid: this.sid,
					fkzt: this.baseFormData.fkzt,
					...this.viewTxlPageParams
				}).then(res => {
					console.log("通讯录显示" + res);
					this.viewTxlTableData = res.rows;
					this.viewTxlPageParams.total = res.total;
					this.isLoading = false
				})
			},
			toCkFile(fkId) {
				this.$tab.navigateTo("/pages/home/step/ckFlie?fkId=" + fkId);
			}
		},
		created() {
			getDicts("fkzt").then(response => {
				for (let item of response.data) {
					this.fkztDics.push({
						"text": item.dictLabel,
						"value": item.dictValue
					})
				}
			});
			getAppZjxdRwbInfo({sid: this.sid, username: this.username }).then(res => {
				this.viewData = res.data;
			});
			this.getList();
		}
	}
</script>

<style scoped>
	page {
		background-color: #ffffff;
	}

	.box {
		border-bottom: solid #999696 1px;
	}

	label {
		margin-right: 5px;
	}

	.colorHong {
		color: red;
	}
</style>
